// createRouter, createWebHistory 已通过自动引入配置
import { createRouter, createWebHistory } from 'vue-router'

// 主布局
const Layout = () => import('../layouts/Layout.vue')

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: { title: '登录' },
    hidden: true // 在侧边栏中隐藏
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('../views/Dashboard.vue'),
        meta: {
          title: '仪表盘',
          icon: 'Monitor',
          affix: true // 固定标签
        }
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('../views/Profile.vue'),
        meta: {
          title: '个人资料',
          icon: 'User'
        },
        hidden: true // 在侧边栏中隐藏
      }
    ]
  },
  {
    path: '/system',
    component: Layout,
    meta: {
      title: '系统管理',
      icon: 'Setting'
    },
    children: [
      {
        path: 'user',
        name: 'SystemUser',
        component: () => import('../views/system/User.vue'),
        meta: {
          title: '用户管理',
          icon: 'UserFilled'
        }
      },
      {
        path: 'role',
        name: 'SystemRole',
        component: () => import('../views/system/Role.vue'),
        meta: {
          title: '角色管理',
          icon: 'Avatar'
        }
      },
      {
        path: 'menu',
        name: 'SystemMenu',
        component: () => import('../views/system/Menu.vue'),
        meta: {
          title: '菜单管理',
          icon: 'Menu'
        }
      }
    ]
  },
  {
    path: '/demo',
    component: Layout,
    meta: {
      title: '示例页面',
      icon: 'MagicStick'
    },
    children: [
      {
        path: 'auto-import',
        name: 'AutoImportDemo',
        component: () => import('../views/AutoImportDemo.vue'),
        meta: {
          title: '自动引入演示',
          icon: 'Lightning'
        }
      },
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/AboutView.vue'),
        meta: {
          title: '关于我们',
          icon: 'InfoFilled'
        }
      },
      {
        path: 'home',
        name: 'Home',
        component: () => import('../views/HomeView.vue'),
        meta: {
          title: '首页演示',
          icon: 'House'
        }
      }
    ]
  },
  {
    path: '/tools',
    component: Layout,
    meta: {
      title: '工具集合',
      icon: 'Tools'
    },
    children: [
      {
        path: 'charts',
        name: 'Charts',
        component: () => import('../views/tools/Charts.vue'),
        meta: {
          title: '图表展示',
          icon: 'TrendCharts'
        }
      },
      {
        path: 'table',
        name: 'Table',
        component: () => import('../views/tools/Table.vue'),
        meta: {
          title: '表格组件',
          icon: 'Grid'
        }
      }
    ]
  },
  // 404页面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/404.vue'),
    meta: { title: '页面未找到' },
    hidden: true
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    return { top: 0 }
  }
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - Element Plus 模板`
  }
  next()
})

export default router
